{layout name="layout/default" /}
<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
    <div class="layui-input-inline">
        <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
    </div>
    <button class="layui-btn mgl-20">查询</button>
    </span>
</div>

<!-- 表格 -->
<div id="dateTable"></div>

<script type="text/javascript">
    // layui方法
    layui.use(['table', 'form', 'layer'], function() {

        // 操作对象
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable' //指定原始表格元素选择器（推荐id选择器）
                ,
            // height: vipTable.getFullHeight() //容器高度
            // ,
            cols: [
                [ //标题栏
                    {
                        checkbox: true,
                        sort: true,
                        fixed: true,
                        space: true
                    }, {
                        field: 'id',
                        title: 'ID',
                        width: 80
                    }, {
                        field: 'title',
                        title: '标题',
                        width: 120
                    }, {
                        field: 'ico',
                        title: '图标',
                        width: 180
                    }, {
                        field: 'name',
                        title: '规则',
                        width: 180
                    }, {
                        field: 'weigh',
                        title: '权重',
                        width: 180
                    }, {
                        field: 'status',
                        title: '状态',
                        width: 70
                    }, {
                        field: 'ismenu',
                        title: '菜单',
                        width: 120
                    }, {
                        fixed: 'right',
                        title: '操作',
                        width: 150,
                        align: 'center',
                        toolbar: '#barOption'
                    }
                    //这里的toolbar值是模板元素的选择器
                ]
            ],
            id: 'dataCheck',
            url: '{:url()}',
            method: 'get',
            page: false,
            limits: [30, 60, 90, 150, 300],
            limit: 30 //默认采用30
                ,
            loading: false,
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        // 获取选中行
        table.on('checkbox(dataCheck)', function(obj) {
            layer.msg('123');
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        // 刷新
        $('#btn-refresh').on('click', function() {
            tableIns.reload();
        });
        // 添加
        $('#btn-add').on('click', function() {
            layer.open({
                type: 2,
                content: ['{:url("add")}', 'yes'],
                title: '添加',
                area: ['800px', '600px'],

            });
        });
        //监听工具条
        table.on('tool', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log(data);
            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function(index) {
                    $.post("{:url('del')}?ids=" + data.id, function(data) {
                        if (data.status == 200) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        } else {
                            layui.msg(data.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                        obj.update(data);
                    }, 'json')
                });
            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 2,
                    content: ["{:url('edit')}?ids=" + data.id, 'yes'],
                    title: '添加',
                    area: ['800px', '600px'],
                    end: function() {
                        $.post("{:url()}?t=one&ids=" + data.id, function(data) {
                            obj.update(data);
                        })
                    }
                });
                //do something


                //同步更新缓存对应的值
                // obj.update({
                //     username: '123',
                //     title: 'xxx'
                // });
            }
        });


    });
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>